feat(themes): add derived themes for inner components#17257
Open
feat(themes): add derived themes for inner components#17257
Conversation
didimmova
added
❌ status: awaiting-test
Contributor
There was a problem hiding this comment.
Pull request overview
This PR extends the Sass theming layer by introducing “derived themes” for several inner/grid-related components (column actions, paginator, grid toolbar, query builder, advanced filtering, and excel-style filtering). It also adds a new 21.2.2 migration to automatically rename updated theme properties/CSS variables so existing apps can upgrade with minimal manual changes.
Changes:
- Added derived-theme mixins for multiple components to scope and propagate token overrides to internal sub-components.
- Implemented/updated the excel-style filtering theme and wired it into the global theme generator.
- Added a
21.2.2migration (and tests) to rename changed theme properties and CSS custom properties.
Reviewed changes
Copilot reviewed 20 out of 20 changed files in this pull request and generated 5 comments.
Show a summary per file
| File | Description |
|---|---|
| projects/igniteui-angular/migrations/update-21_2_2/index.ts | Adds 21.2.2 migration runner and manual CSS-var renames. |
| projects/igniteui-angular/migrations/update-21_2_2/index.spec.ts | Adds schematic tests for property/CSS-var renames. |
| projects/igniteui-angular/migrations/update-21_2_2/changes/theme-changes.json | Declares theme property renames for affected themes. |
| projects/igniteui-angular/migrations/migration-collection.json | Registers the new migration in the schematics collection. |
| projects/igniteui-angular/core/src/core/styles/themes/generators/_base.scss | Includes excel-style filtering theme generation in the base theme pipeline. |
| projects/igniteui-angular/core/src/core/styles/components/query-builder/_query-builder-theme.scss | Switches query-builder theming to tokens + derived themes and adds dialog styling placeholder. |
| projects/igniteui-angular/core/src/core/styles/components/query-builder/_query-builder-derived-themes.scss | New: derived token overrides for query-builder internal dependencies. |
| projects/igniteui-angular/core/src/core/styles/components/query-builder/_query-builder-component.scss | Imports advanced-filtering component styles (and whitespace cleanup). |
| projects/igniteui-angular/core/src/core/styles/components/paginator/_paginator-theme.scss | Switches paginator theming to tokens + derived themes and renames token keys. |
| projects/igniteui-angular/core/src/core/styles/components/paginator/_paginator-derived-themes.scss | New: derived token overrides for paginator internal dependencies. |
| projects/igniteui-angular/core/src/core/styles/components/grid/_grid-theme.scss | Switches grid theming to tokens + derived themes and adjusts ghost-row token scoping. |
| projects/igniteui-angular/core/src/core/styles/components/grid/_grid-derived-themes.scss | Refactors/updates grid sub-component token overrides (incl. excel filtering). |
| projects/igniteui-angular/core/src/core/styles/components/grid/_excel-filtering-theme.scss | Updates excel filtering theme to tokens + derived themes and renames token keys. |
| projects/igniteui-angular/core/src/core/styles/components/grid/_excel-filtering-derived-themes.scss | New: derived token overrides for excel filtering internal dependencies. |
| projects/igniteui-angular/core/src/core/styles/components/grid-toolbar/_grid-toolbar-theme.scss | Switches grid-toolbar theming to tokens + derived themes and renames token keys. |
| projects/igniteui-angular/core/src/core/styles/components/grid-toolbar/_grid-toolbar-derived-themes.scss | New: derived token overrides for grid-toolbar inner dependencies. |
| projects/igniteui-angular/core/src/core/styles/components/column-actions/_column-actions-theme.scss | Switches column-actions theming to tokens + derived themes and renames token keys. |
| projects/igniteui-angular/core/src/core/styles/components/column-actions/_column-actions-derived-themes.scss | New: derived token overrides for column-actions internal dependencies. |
| projects/igniteui-angular/core/src/core/styles/components/_index.scss | Exposes the excel-filtering theme via the components index. |
| projects/igniteui-angular/core/src/core/styles/components/_common/_extract-theme-schema.scss | New helper for extracting schema/variant from a theme map. |
Comments suppressed due to low confidence (1)
projects/igniteui-angular/core/src/core/styles/components/grid/_grid-derived-themes.scss:123
- In
grid-derived-themes, theexcel-filtering-theme(...)token overrides are set to values likevar(--excel-filtering-header-foreground)/var(--excel-filtering-border-color), but those CSS variables are not defined anywhere else in the repo. This will make the resulting--ig-excel-filtering-*tokens resolve to undefined vars and break styling. Use existing variables (e.g.var(--_grid-foreground),var(--_grid-background), etc.) or add explicit fallbacks in thevar()expressions.
Comment on lines
+288
to
+292
| "migration-55": { | ||
| "version": "21.2.0", | ||
| "description": "Updates Ignite UI for Angular from v21.1.x to v21.2.0", | ||
| "factory": "./update-21_2_0" | ||
| }, |
Comment on lines
+5
to
+10
| /// @deprecated Use the `css-vars` mixin instead. | ||
| /// @see {mixin} css-vars | ||
| /// @param {Map} $theme - The grid theme used to style the component. | ||
| @mixin query-builder($theme) { | ||
| @include css-vars($theme); | ||
| @include tokens($theme, $mode: 'scoped'); | ||
| @include query-builder-derived-themes($theme); |
| cursor: grab; | ||
| } | ||
| } | ||
| // @include excel-filtering($theme); |
Comment on lines
131
to
141
| // @include tree(tree-theme( | ||
| // $background: color($color: 'surface'), | ||
| // $background-selected: color($color: 'surface'), | ||
| // $background-active: color($color: 'surface'), | ||
| // $background-active-selected: color($color: 'surface'), | ||
| // $foreground: contrast-color($color: 'surface'), | ||
| // $foreground-selected: contrast-color($color: 'surface'), | ||
| // $foreground-active: contrast-color($color: 'surface'), | ||
| // $foreground-active-selected: contrast-color($color: 'surface'), | ||
| // )); | ||
|
|
Comment on lines
+8
to
+28
| $variant: map.get($theme, '_meta', 'theme'); | ||
| $theme-variant: map.get($theme, '_meta', 'variant'); | ||
| $schema: map.get( | ||
| ( | ||
| 'light-material': $light-material-schema, | ||
| 'light-bootstrap': $light-bootstrap-schema, | ||
| 'light-fluent': $light-fluent-schema, | ||
| 'light-indigo': $light-indigo-schema, | ||
| 'dark-material': $dark-material-schema, | ||
| 'dark-bootstrap': $dark-bootstrap-schema, | ||
| 'dark-fluent': $dark-fluent-schema, | ||
| 'dark-indigo': $dark-indigo-schema, | ||
| ), | ||
| '#{$theme-variant}-#{$variant}' | ||
| ); | ||
|
|
||
| @return ( | ||
| 'variant': $variant, | ||
| 'theme-variant': $theme-variant, | ||
| 'schema': $schema | ||
| ); |
Comment on lines
115
to
117
| @include e(expression-item-keyboard-ghost) { | ||
| @extend %filter-tree__expression-item-keyboard-ghost !optional; | ||
| } |
Comment on lines
+477
to
+481
| @if is-used('igx-grid-excel-style-filtering', $exclude) { | ||
| $grid-excel-style-filtering-theme-map: excel-filtering-theme( | ||
| $schema: $schema, | ||
| ); | ||
| $grid-excel-style-filtering-theme-map: meta.call( |
Comment on lines
+568
to
+572
| %advanced-filtering-dialog { | ||
| background: var-get($theme, 'background'); | ||
| box-shadow: elevation(if($variant == 'indigo', if($theme-variant == 'light', 24, 23), 24)); | ||
|
|
||
| @if $variant == 'material' or $variant == 'bootstrap' { |
Comment on lines
+1
to
+26
| import * as path from "path"; | ||
|
|
||
| import { | ||
| SchematicTestRunner, | ||
| UnitTestTree, | ||
| } from "@angular-devkit/schematics/testing"; | ||
| import { setupTestTree } from "../common/setup.spec"; | ||
|
|
||
| const version = "21.2.2"; | ||
| const columnActionsThemes = ["column-actions-theme"]; | ||
| const gridToolbarThemes = ["grid-toolbar-theme"]; | ||
| const paginatorThemes = ["paginator-theme"]; | ||
| const testFilePath = "/testSrc/appPrefix/component/test.component.scss"; | ||
|
|
||
| describe(`Update to ${version}`, () => { | ||
| let appTree: UnitTestTree; | ||
| const schematicRunner = new SchematicTestRunner( | ||
| "ig-migrate", | ||
| path.join(__dirname, "../migration-collection.json"), | ||
| ); | ||
|
|
||
| beforeEach(() => { | ||
| appTree = setupTestTree(); | ||
| }); | ||
|
|
||
| const migrationName = "migration-56"; |
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
desig9stein
added
💥 status: in-test
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Creates derived themes for inner components of the
column actions,paginator,grid-toolbar,query-builder,advanced-filtering,excel-style-filtering.Implements the new excel-filtering theme
Adds migratons for the changed properties in the theming package
Test with IgniteUI/igniteui-theming#570